<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="nested" /><span
              >江苏传智播客教育科技股份有限公司</span
            >
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="hAdd('')">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-tree
          :default-expand-all="true"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <template slot-scope="{ node, data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <svg-icon icon-class="nested" /><span>{{ node.label }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hAdd(data.id)"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="hEdit(data)">编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="hDel(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <el-dialog 
    :close-on-click-modal="false"
    :close-on-press-escap="false"
    :title="isEdit ? '编辑部门':'添加部门'" 
    :visible.sync="showDialog">
      <DeptDialog 
      v-if="showDialog"
      @success="hSuccess"
      @close="hClose"
      :isEdit="isEdit"
      :pid="curId"/>
    </el-dialog>
  </div>
</template>
 
<script>
import { getDepartment,delDepartment } from "@/api/department";
import { arrayToTree } from "@/utils/index";
import DeptDialog from "./deptDialog.vue";
export default {
  components: { DeptDialog },
  created() {
    //发请求
    this.loadDepartment();
  },
  data() {
    return {
      curId:'',//当前选中的部门ID
      isEdit:false,
      //是否显示弹框
      showDialog: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    hClose(){
      this.showDialog = false
    },
    hDel(id){
      this.$confirm('此操作将永久删除部门, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 做删除
            this.doDel(id)
          }).catch(() => {

          })
    },
    async doDel(id){
      try{
        await delDepartment(id)
        //1.提示
        this.$message({type:'success',message:'删除成功!'})
        //2.重新加载页面 更新数据
        this.loadDepartment()
      }catch(err){
        this.$message({type:'error',message:'删除失败'})
      }
    },
    hSuccess(){
      // 关闭弹层，再次更新数据
      this.showDialog = false
      this.loadDepartment()
    },
    //用户点击了添加
    hAdd(id){
      //1.显示弹框
      this.showDialog = true
      //2.拿到当前的id
      this.curId = id
      //3.设置编辑状态为false
      this.isEdit = false
    },
    //用户点击了编辑
    hEdit(data){
      //更新当前的id
      this.curId = data.id
      //设置状态为编辑
      this.isEdit = true
      //打开弹框
      this.showDialog = true
    },
    async loadDepartment() {
      const res = await getDepartment();
      console.log("res", res);
      //删除第一项
      res.data.depts.shift();
      this.data = arrayToTree(res.data.depts);
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>